<!--  -->
<template>
<div class="app-home">
     
    <top-header></top-header>
    <h1>数据统计</h1>
      <div class="app-home-container">
      <div class="home-container-box">
        <div class="container-box-left">
          <span class="title">总用户量:</span>
          <span class="num">{{ userTotalCount }}</span>
        </div>
        <div class="container-box-right">
          <span class="title1">注册用户:</span>
          <span class="num1">{{ userCount }}</span>
        </div>
      </div>
      <div class="home-container-box">
        <div class="container-box-left">
          <span class="title">总订单量:</span>
          <span class="num">{{ orderTotalCount }}</span>
        </div>
        <div class="container-box-right">
          <span class="title1">新增订单:</span>
          <span class="num1">{{ orderCount }}</span>
        </div>
      </div>
      <div class="home-container-box">
        <div class="container-box-left">
          <span class="title">管理员:</span>
          <span class="num">{{ adminTotalCount }}</span>
        </div>
        <div class="container-box-right">
          <span class="title1">新增管理员:</span>
          <span class="num1">{{ adminCount }}</span>
        </div>
      </div>
    </div>
    <div class="app-home-chart">
    <right-bottom  :serverndate="serverndate" :serverdatadata="serverdatadata"></right-bottom>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import topheader from "@/components/top.vue";
import tendence  from "@/components/charts/tendency.vue"
import {gettotaluser,getusrecoute,gettotader,getorder,getadd,getbbd} from "../data/api"
import {DateUtils} from "../utils/datautils"
export default {
//import引入的组件需要注入到对象中才能使用
components: {
    "top-header":topheader,
    "right-bottom":tendence 
},
data() {
//这里存放数据
return {
      userTotalCount: 0,
      userCount: 0,
      orderTotalCount: 0,
      orderCount: 0,
      adminTotalCount: 0,
      adminCount: 0,
      serverndate:[],
      serverdatadata:[]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
   initservendaydate:function(){
     let serverndate = [];
     for (let i=6;i>=0;i--){
       let oldDate = new Date(new Date().getTime()-i*1000*60*60*24);
       let olddatestring = DateUtils.getFormatDate(oldDate);
       serverndate.push(olddatestring)
     }
    this.serverndate=serverndate;
    let serverdatadata = [[],[],[]];
    let senvendataapi = [[],[],[]];
    for (let i=0;i<serverndate.length;i++){
      senvendataapi[0].push(getusrecoute(serverndate[i]));
      senvendataapi[1].push(getorder(serverndate[i]));
      senvendataapi[2].push(getbbd(serverndate[i]));

    }
    Promise.all([
      ...senvendataapi[0],
      ...senvendataapi[1],
      ...senvendataapi[2],
    ]).then((results) => {
       results.map((v,i) =>{
         serverdatadata[Math.floor(i/7)].push(v.count);
       });
       console.log(serverdatadata);
       this.serverdatadata=serverdatadata
    })
   }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  this.initservendaydate();
  let today = DateUtils.getFormatDate(new Date());
 Promise.all([gettotaluser(),getusrecoute(today),gettotader(),getorder(today),getadd(),getbbd(today)]).then(results => {
     console.log(results);
      this.userTotalCount = results[0].count;
      this.userCount = results[1].count;
      this.orderTotalCount = results[2].count;
      this.orderCount = results[3].count;
      this.adminTotalCount = results[4].count;
      this.adminCount = results[5].count;
 });

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
@import url("../style/minxi.less");
.app-home {
  background-color: white;
  height: 100%;
  h1 {
    text-align: center;
    font-weight: 300;
    height: 50px;
    line-height: 50px;
  }
  .app-home-container {
    display: flex;
    .home-container-box {
      height: 80px;
      border-top: 1px solid #ddd;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      flex: 1;
      display: flex;
      .container-box-left {
        .fc();
        flex: 1;
        .num {
          font-size: 30px;
          font-weight: 200;
          color: #ff9800;
        }

        .title {
        }
      }

      .container-box-right {
        .fc();
        flex: 1;
        .title1 {
        }

        .num1 {
          font-size: 30px;
          font-weight: 200;
          color: #20a0ff;
        }
      }
    }
  }
}
</style>